<template>
  <el-breadcrumb class="app-breadcrumb" separator="→">
    <transition-group name="breadcrumb" class="box">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.name
          }}</span>
        <!-- <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a> -->
        <a v-else @click.prevent="">{{ item.name }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {
  data() {
    return {
      levelList: null,
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
    this.breadcrumbStyleChange()
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      // only show routes with meta.title
      let route = this.$route
      let matched = route.matched.filter(item => item.meta)
      const first = matched[0]
      matched = [{ path: '/index' }].concat(matched)

      this.levelList = matched.filter(item => item.meta)
      console.log(this.levelList[1].name);
      if (this.levelList[1].name === '首页'|| this.levelList[1].name === '首页信息') {
        this.levelList[0].name = '首页'
        this.levelList[1].name = '首页信息'
      } else if (this.levelList[1].name === '修改密码' || this.levelList[1].name === '个人信息') {
        this.levelList[0].name = '个人中心'
      } else if (this.levelList[1].name === '管理信息') {
        this.levelList[0].name = '管理员管理'
      } else if (this.levelList[1].name === '车辆信息') {
        this.levelList[0].name = '车辆管理'
      } else if (this.levelList[1].name === '车辆类型' || this.levelList[1].name === '车辆状态' || this.levelList[1].name === '公告类型' || this.levelList[1].name === '物流状态' || this.levelList[1].name === '运单状态') {
        this.levelList[0].name = '基础数据管理'
      } else if (this.levelList[1].name === '公告信息') {
        this.levelList[0].name = '公告信息管理'
      } else if (this.levelList[1].name === '司机') {
        this.levelList[0].name = '司机管理'
      } else if (this.levelList[1].name === '物流信息') {
        this.levelList[0].name = '物流信息管理'
      } else if (this.levelList[1].name === '用户') {
        this.levelList[0].name = '用户管理'
      } else {
        this.levelList[0].name = '运单信息管理'
      }
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      
      if (redirect) {
        this.$router.push(redirect)
        return
      }

      this.$router.push(path)
    },
    breadcrumbStyleChange(val) {
      this.$nextTick(() => {
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
          el.innerText = "→"
          el.style.color = "rgba(255, 255, 255, 1)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
          el.style.color = "rgba(255, 255, 255, 0.9)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
          el.style.color = "rgba(255, 255, 255, 1)"
        })

        let str = "vertical"
        if ("vertical" === str) {
          let headHeight = "60px"
          headHeight = parseInt(headHeight) + 10 + 'px'
          document.querySelectorAll('.app-breadcrumb').forEach(el => {
            el.style.marginTop = headHeight
          })
        }

      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb {
  display: block;
  font-size: 14px;
  line-height: 50px;
  height: 50px;
  background-color: rgba(30, 58, 138, 0.8);
  border-radius: 4px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 70px;

  .box {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  .no-redirect {
    color: rgba(255, 255, 255, 1);
    cursor: text;
  }

  .el-breadcrumb__separator {
    color: rgba(255, 255, 255, 1);
  }

  .el-breadcrumb__inner a {
    color: rgba(255, 255, 255, 0.9);
  }
}
</style>
